/*
 * @Author: cys
 * @Date: 2018-07-23 10:36:04
 * @Last Modified by: cys
 * @Last Modified time: 2018-10-18 19:14:31
 * 表格视图混合
 */
import { Component, Vue, Watch } from "vue-property-decorator";
import { debounce } from "lodash";
import { EventBus } from "feok-lib";

@Component
export default class TableViewMix extends Vue {
  public data: any[] = []; // 当前页表格数据
  public preData = []; // 上一页表格数据
  public nextData = []; // 下一页表格数据
  public pageSize = 25; // 每页大小
  public pageNo = 1; // 当前页
  public query = {}; // 条件
  public loading = false; // 表格加载中
  public listNomore = true; // 是否还有更多数据
  public pageChange = debounce(this._pageChange, 200);
  public fetchDataAction: any;
  public SyncRequestNum = 0; // 多个异步请求数量(用于解决多个请求时，当其中一个异步请求结束并且剩余请求数量大于0时，不结束loading状态)
  get nomore() {
    return this.listNomore || this.loading;
  }

  public prePage = {
    data: [],
    loading: false
  };

  public nextPage = {
    data: [],
    loading: false
  };


  public isMounted = false; // 是否mounted


  @Watch("pageNo")
  public pageNoChange(val: number) {
    EventBus.$emit("tablePageChange", val);
  }
  /**
   * fetch 数据
   */
  public get emptyText() {
    let text = "";
    if (this.loading) {
      text = "正在拉取数据...";
    }
    if (this.data.length === 0) {
      text = "暂无数据";
    }
    return text;
  }
  /**
   * fetch 数据
   */
  public async fetchData() {
    this.loading = true;
    this.SyncRequestNum++;
    // 拉取当前页数据
    let data;
    try {
      data = await this.fetchDataAction({
        ...this.query,
        page_no: this.pageNo,
        page_num: this.pageSize
      });
      this.data = data;
    } catch (err) {
      console.log(err);
    } finally {
      this.SyncRequestNum > 0 && this.SyncRequestNum--;
      this.$nextTick(function() {
        if (this.SyncRequestNum === 0) {
          this.loading = false;
        }
      });
    }

    // this.$nextTick(function() {
    //   this.loading = false;
    // });

    // 拉取下一页数据
    if (data && data.length >= this.pageSize) {
      this.fetchNextData();
      // this.listNomore = false;
    } else {
      this.listNomore = true;
    }

    // 拉取上一页数据
    this.pageNo !== 1 && this.fetchProData();
  }

  /**
   * 搜索
   */
  public handleSearch() {
    this.$nextTick(() => {
      this.pageNo = 1;
      this.fetchData();
    });
  }

  /**
   * 下一页加载中
   */
  public nextPageLoading() {
    this.nextPage = {
      data: [],
      loading: true
    };
  }

  /**
   * 下一页加载完毕
   * @param data 下一页的数据
   */
  public nextPageLoaded(data: any) {
    this.nextPage = {
      data,
      loading: false
    };
  }

  /**
   * 上一页加载中
   */
  public prePageLoading() {
    this.prePage = {
      data: [],
      loading: true
    };
  }

  /**
   * 上一页加载完毕
   * @param data 上一页的数据
   */
  public prePageLoaded(data: any) {
    this.prePage = {
      data,
      loading: false
    };
  }

  /**
   * 拉取下一页数据
   */
  public fetchNextData() {
    this.nextPageLoading(); // 设置状态
    this.fetchDataAction({
      ...this.query,
      page_no: this.pageNo + 1,
      page_num: this.pageSize
    }).then((nextData: any) => {
      this.nextPageLoaded(nextData); // 设置状态
      this.listNomore = !nextData.length;
    });
  }

  /**
   * 拉取上一页数据
   */
  public fetchProData() {
    this.prePageLoading();
    this.fetchDataAction({
      ...this.query,
      page_no: this.pageNo - 1,
      page_num: this.pageSize
    }).then((preData: any) => {
      this.prePageLoaded(preData);
      this.preData = preData;
    });
  }

  public resetData(newPage: number) {
    this.pageNo = newPage;
    this.fetchData();
  }

  public preAction(newPage: number) {
    if (this.prePage.loading) {
      this.resetData(newPage);
      return false;
    }
    this.data = this.prePage.data;
    this.loading = this.prePage.loading;
  }

  public nextAction(newPage: number) {
    if (this.nextPage.loading) {
      this.resetData(newPage);
      return false;
    }
    this.data = this.nextPage.data;
    this.loading = this.nextPage.loading;
  }

  /**
   * 翻页
   * @param page - 新页码
   */
  public _pageChange(newPage: number) {
    if (Math.abs(newPage - this.pageNo) > 1) {
      this.resetData(newPage);
      return false;
    }
    // 向回翻页
    if (this.pageNo > newPage) {
      this.preAction(newPage);
    }
    // 向下翻页
    if (this.pageNo < newPage) {
      this.nextAction(newPage);
    }
    this.pageNo = newPage;
    // 拉取下一页数据
    if (this.data.length >= this.pageSize) {
      this.fetchNextData();
      // this.listNomore = false;
    } else {
      this.listNomore = true;
    }
    // 拉取上一页数据
    this.pageNo !== 1 && this.fetchProData();
  }

  public mounted() {
    this.isMounted = true;
  }
  public activated() {
    setTimeout(() => {
      this.isMounted = false;
    }, 0);
  }
}
